<template>
  <div class="grid grid-cols-4 md:grid-cols-4 lg:grid-cols-6 justify-center items-end py-4 gap-y-4">
    <div class="" v-for="(item, index) in navItem" :key="index">
      <div
        class="flex flex-col justify-end items-center gap-y-2 hover:cursor-pointer"
        @click="handleNav(item.path)"
        @keyup.enter="handleNav(item.path)"
        :tabindex="0"
        :aria-label="item.title"
      >
        <div class="relative" v-ripple>
          <v-badge
            v-if="item.badgeValue"
            bordered
            inline
            :value="item.badgeValue || false"
            color="red"
            :content="item.badgeContent"
            style="position: absolute; right: -30px; top: -10px"
          ></v-badge>

          <component :is="item.icon" :size="30" :customStyle="{ width: '30px', height: '30px' }"> </component>
        </div>
        <div class="text-title">{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import BookMinus from "@/icon/home/赞美.vue";
import ProjectorScreen from "@/icon/home/投影仪.vue";
import HeartIcon from "@/icon/home/心.vue";
import FolderMusicOutline from "@/icon/home/歌单.vue";
import JcIconBible from "@/icon/home/bible.vue";
import ApkIcon from "@/icon/home/安卓Apk.vue";
import { getAppVersion } from "@/api/cloudbase-bbkz";
import MdiLighthouse from "@/icon/home/灯塔.vue";
import DeepIcon from "@/icon/home/深层.vue";
import dayjs from "dayjs";
export default {
  name: "star-nav",
  computed: {
    ...mapGetters(["t"]),
  },
  components: {
    BookMinus,
    ProjectorScreen,
    HeartIcon,
    FolderMusicOutline,
    JcIconBible,
    ApkIcon,
    MdiLighthouse,
    DeepIcon,
  },
  mounted() {
    getAppVersion().then((res) => {
      const diffday = dayjs().diff(dayjs(res.data.createTime), "day");
      if (diffday <= 3) {
        this.navItem = this.navItem.map((item) => {
          if (item.path === "/appdownload") {
            return {
              ...item,
              badgeValue: true,
              badgeContent: "更新",
            };
          }
          return { ...item };
        });
      }
    });
  },
  data() {
    return {
      start: "start",
      // 功能导航列表
      navItem: [
        {
          title: "诗歌本",
          icon: "book-minus",
          path: "sgb",
          enTitle: "appendix",
          chTitle: "附录",
          langKey: "nav.sgb",
        },
        {
          title: "深层呼吸",
          icon: "deep-icon",
          path: "/deep_breathe",
          enTitle: "Meditation room",
          chTitle: "深层呼吸",
          langKey: "nav.touying",
          badgeValue: true,
          badgeContent: "新",
        },

        {
          title: "App下载",
          icon: "apk-icon",
          path: "/appdownload",
          enTitle: "Meditation room",
          chTitle: "App下载",
          langKey: "nav.touying",
        },
      ],
    };
  },
  methods: {
    handleNav(path) {
      if (path.indexOf("http") !== -1) {
        location.href = path;
      } else {
        this.$router.push(path);
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
